<!-- 主内容区 -->
    <div class="pt-16 pb-8 min-h-screen">
        <div class="container mx-auto px-4">
            <!-- 页面标题 -->
            <div class="mt-8 mb-6 flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h4 class="text-[clamp(1.2rem,3vw,2rem)] font-bold text-gray-800">第<?= $location["location_order"]?>号 <?= $location["name"]?>研学基地介绍</h4>
                    <p class="text-gray-600 mt-1"><?= $location["description"]?></p>
                    <input type="hidden" id="page_id" value="<?= $location['id'] ?>">
                </div>
            </div>

            <!-- 基地特点图片展示 -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/leifeng_1.jpg") ?>" alt="雷锋研学基地全景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/leifeng_2.jpg") ?>" alt="研学活动场景" class="w-full h-48 object-cover">
                </div>
                
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-500 hover:shadow-xl hover:-translate-y-1">
                    <img src="<?= base_url("/images/leifeng_3.jpg") ?>" alt="雷锋事迹展示环境" class="w-full h-48 object-cover">
                </div>
            </div>

            <!-- 简介和图表左右分列 -->
            <div class="flex flex-col md:flex-row mt-8 mb-6">
                <!-- 简介 -->
                <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl w-full md:w-4/5">
                <h3 class="text-xl font-bold text-gray-800 mb-2">简介</h3>
                <div class="text-gray-600 space-y-4">
                    <p class="text-indent-8">&emsp;&emsp;雷锋营地占地面积计 68 万平方米，投资总额 10亿元，拥有：雷锋精神文化长廊、雷锋剧场、雷锋塑像广场、红船精神文化馆、欢乐剧场、状元堂、土豆博物馆、洞庭水产博物馆、中国传统农具展览馆、动物农场。</p>
                    <p class="text-indent-8">&emsp;&emsp;雷锋营地开发了：红船少年心向党、我们与雷锋同行、跟着雷锋去学农、我是洞庭小渔夫、小土豆的大使命、垃圾分类我先行、走进动物朋友圈、探秘神奇机械臂、勇当消防志愿兵、团队有我更精彩等系列中小学生劳动与实践教育课程。</p>
                </div>
            </div>

                <!-- 图表 -->
                <div class="w-full md:w-1/3 p-6">
                    <canvas id="myChart"></canvas>
                </div>
            </div>

            <!-- 亮点内容 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <h3 class="text-xl font-bold text-gray-800 mb-2">亮点内容</h3>
                <!-- 深入了解雷锋事迹 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">1. 深入了解雷锋事迹</h4>
                    <p class="text-gray-600">&emsp;&emsp;基地通过大量的图片、实物和多媒体资料，生动地展示了雷锋的生平事迹和成长历程。参与者可以在这里详细了解雷锋的故事，感受他的伟大精神。</p>
                </div>
                <!-- 互动体验学习 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">2. 互动体验学习</h4>
                    <p class="text-gray-600">&emsp;&emsp;设有互动体验区，通过模拟雷锋做好事的场景、角色扮演等方式，让参与者身临其境地感受雷锋精神，增强学习的趣味性和实效性。</p>
                </div>
                <!-- 志愿服务实践 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">3. 志愿服务实践</h4>
                    <p class="text-gray-600">&emsp;&emsp;基地提供志愿服务实践的平台，参与者可以参与社区服务、环保行动等志愿活动，将雷锋精神融入到实际行动中，培养奉献意识和社会责任感。</p>
                </div>
                <!-- 主题讲座与交流 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">4. 主题讲座与交流</h4>
                    <p class="text-gray-600">&emsp;&emsp;定期举办关于雷锋精神的主题讲座和交流活动，邀请专家学者、雷锋事迹的见证者等进行分享，让参与者能够从不同角度深入理解雷锋精神的内涵。</p>
                </div>
                <!-- 红色文化传承 -->
                <div class="mt-4">
                    <h4 class="text-lg font-bold text-gray-800 mb-1">5. 红色文化传承</h4>
                    <p class="text-gray-600">&emsp;&emsp;作为红色文化教育的重要阵地，基地注重传承和弘扬红色文化，让参与者在研学过程中接受爱国主义教育和革命传统教育。</p>
                </div>
            </div>

            <!-- 雷锋研学基地一日研学课程安排 -->
            
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">【雷锋研学基地一日研学课程安排】</h2>
    <div class="overflow-x-auto">
        <table class="w-full border-collapse">
            <colgroup>
                <col style="width: 20%;"> <!-- 时间列 -->
                <col style="width: 20%;"> <!-- 环节列 -->
                <col style="width: 60%;"> <!-- 环节介绍列 -->
            </colgroup>
            <thead>
                <tr class="bg-gray-50">
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">时间</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节</th>
                    <th class="text-left border border-gray-300 py-3 px-4 font-bold">环节介绍</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">09:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">快乐出发</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">欢乐行车，欣赏路途风景</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">09:30 - 10:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">艰苦奋斗学劳模</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">在雷锋塑像广场开展学雷锋开营仪式：佩戴雷锋徽章；唱国歌；抚摸国旗；校领导讲话；授旗仪式；宣誓建功新时代</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">10:00 - 10:30</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">《永生的战士》</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">在雷锋剧场进行雷锋纪录片鉴赏：《永生的战士——雷锋》</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">10:30 - 11:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">传统技艺大擂台</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">在雷锋剧场观看欢乐小丑表演、中国传统文化功夫杂技、非物质文化遗产川剧变脸与喷火表演，感受劳动人民的智慧与技术的完美融合</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">11:00 - 12:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">追寻雷锋的足迹</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">参观长沙雷锋博物馆，了解雷锋光辉的一生，打卡雷锋一生中重要的劳动载体：拖拉机、最爱的解放大卡车，了解雷锋与车的不解之缘，体验模拟汽车驾驶台，体悟我国自主生产的第一辆车所承载的民族自豪与中国人民向往美好生活的愿望</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">12:00 - 13:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">午餐</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">享用自备午餐</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">13:00 - 14:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">走进动物朋友圈</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">走进萌宠动物园、栖凤园、鹦鹉园、飞鸟驿站、孔雀园、鸵鸟园、梅花鹿园、羊羊牧场、咕咕鸽舍等多个主题科普区，与萌宠互动，体验制作食物、喂食等活动</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">14:00 - 16:00</td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">雷锋营地快乐行</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">畅玩：大摆锤、极速风车、旋风骑士、过山车、碰碰车、海盗船、阿拉伯飞毯、太空漫步、旋转木马、转转杯、滑翔飞翼等20多项机械设备，鼓励同学们勇于突破自我，敢于挑战困难，增强自我斗志。挑战：童趣园、水上拓展、百人网红秋千园中几十种无动力设施。打卡：长沙蛋蛋博物馆、洞庭湖水产博物馆、长沙雷锋博物馆</p>
                    </td>
                </tr>
                <tr>
                    <td class="border border-gray-300 py-3 px-4 text-center">16:30 - </td>
                    <td class="border border-gray-300 py-3 px-4 font-medium">返程</td>
                    <td class="border border-gray-300 py-3 px-4">
                        <p class="mb-2">满载收获，快乐返程</p>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

            <!-- 结尾 -->
            <div class="bg-white rounded-xl shadow-lg p-6 transform transition-all duration-500 hover:shadow-xl mt-6">
                <p class="text-gray-600">小朋友们，雷锋研学基地的奇妙之旅已经准备好啦！在这里，你们可以深入了解雷锋精神，传承红色基因。每一个活动都充满意义，快来一起开启这场超棒的研学冒险，收获满满的知识和感动吧！</p>
            </div>
        </div>
    </div>

      <script>
        // 获取canvas元素
        const ctx = document.getElementById('myChart').getContext('2d');
        // 定义图表数据
        const data = {
          labels: ['教育性', '互动性', '实践性', '文化性', '安全性'],
          datasets: [{
            label: '基地能力',
            backgroundColor: 'rgba(153, 0, 51, 0.2)',
            borderColor: 'rgba(153, 0, 51, 1)',
            borderWidth: 2,
            data: [9, 8, 9, 8, 9] // 这里的数据可根据实际情况修改，代表各维度的评分
          }]
        };
        // 定义图表配置
        const options = {
          scale: {
            min: 1,             // 最小值设为1
            beginAtZero: true,
            steps: 10,
            stepValue: 1,
            max: 10
          },
          elements: {
            line: {
              // tension: 0.4
            }
          }
        };
        // 创建雷达图实例
        const myChart = new Chart(ctx, {
          type: 'radar',
          data: data,
          options: options
        });

        // 页面加载时记录开始时间
        let startTime = null;

        // 监听页面加载事件，记录开始时间
        window.addEventListener('load', function () {
            startTime = Date.now();
        });

        // 监听页面即将卸载事件，记录结束时间并发送停留时间到后端
        window.addEventListener('beforeunload', function () {
            recordPageStay();
        });

        function recordPageStay() {
            if (startTime === null) return; // 如果开始时间未记录，则不进行后续操作
            let endTime = Date.now();
            let duration = Math.floor((endTime - startTime) / 1000);

            fetch('/record-stay-activity/', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ pageId: document.getElementById('page_id').value, duration: duration })
            })
           .then(response => response.json())
           .then(data => console.log(data));

            startTime = null; // 重置开始时间，避免重复计算
        }
      </script>